<template>
  <div>
      <!-- 标题开始 -->
      <div class="header">
        <van-nav-bar
        title="频道管理"
        left-arrow
        @click-left="onClickLeft"
        />
      </div>
      
      <!-- 标题结束 -->
      <!-- 标签开始 -->
      <p>点击删除以下频道</p>
      <div class="selected">
        <van-tag 
        v-for="item in getSelectedCate" 
        :key="item.id"
        @click="changeSelectState(item.id)"
        plain size="large"
        >
          {{item.cateName}}
        </van-tag>
      </div>
      <p>点击添加以下频道</p>
      <div class="selected">
        <van-tag 
        v-for="item in getUnSelectedCate" 
        :key="item.id"
        @click="changeSelectState(item.id)"
        plain size="large"
        >
          {{item.cateName}}
        </van-tag>
      </div>
      <!-- 标签结束 -->
  </div>
</template>
<script>
import {mapGetters,mapActions,mapMutations} from 'vuex'
export default {
  data() {
    return {
    };
  },
  //方法
  methods:{
     
      ...mapActions(['getData']),// 映射  也支持荷载
      ...mapMutations(['changeState']), //映射
      onClickLeft(){
        this.$router.back()//返回
      },
      changeSelectState(id){
        this.changeState(id)
      }
    },
  computed:{
    // mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
    ...mapGetters(['getSelectedCate','getUnSelectedCate'])
  },
  mounted(){
    this.getData()
  }
};
</script>

<style lang='scss' scoped>
.header{
  .van-nav-bar{
    background-color: #d2691e;
    //样式穿透/深度选择器(/deep/) 解决样式不起作用
    /deep/ .van-nav-bar__content{
      height: 40px;
       .van-icon{
        color: #fff;
      }
      /deep/ .van-nav-bar__title{
        color: #fff;
        font-size: 20px;
      }
    }
  }
}
p{
  padding: 20px;
  color:#999;
}
.selected{
  padding: 0px 20px;
  .van-tag{
    margin: 12px 6px;
  }
}
</style>